<template>
  <van-popup
    v-model:show="props.show"
    :style="{
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="999999"
    teleport="body"
    @click-overlay="closePopup"
  >
    <div class="hash">
      <div class="hash-header">
        <div class="hash-title">{{ $t("airdrop.lockTitle") }}</div>
        <div class="items-center" style="justify-content: space-between">
          <div class="hash-value">{{ $t("airdrop.lockDesc") }}</div>
        </div>
      </div>
      <!-- 跳转链接 -->
      <div class="hash-footer" @click="jumpPageFn">
        {{ $t("airdrop.hqjhm") }}
      </div>
    </div>
    <!-- 关闭按钮 -->
    <img
      class="hash-close"
      src="/image/pledge/close.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="hashValuePopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "jump"]);

onMounted(() => {});
onBeforeUnmount(() => {});

// 关闭弹窗
const closePopup = () => {
  // https://etherscan.io/tx/0xfcde0e9d888949df20e6c86b8cc4dd0456a3b30fd6f6a44d540d285375d54f00
  emit("update:show", false);
};

// 点击了获取激活码
const jumpPageFn = debounce(
  () => {
    emit("jump");
  },
  1000,
  false
);
</script>
<style lang="scss" scoped>
.hash {
  background-color: #fff;
  border-radius: 12 * 2px;
  padding-bottom: 1 * 2px;
  &-header {
    padding: 30 * 2px 20 * 2px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }
  &-title {
    text-align: center;
    color: #141924;
    font-size: 14 * 2px;
    font-weight: 510;
    margin-bottom: 12 * 2px;
  }
  &-value {
    color: #999da7;
    font-size: 13 * 2px;
    margin-right: 10 * 2px;
    width: calc(100% - 20 * 2px);
    line-height: 20 * 2px;
    word-wrap: break-word;
    text-align: center;
  }
  &-copy {
    width: 20 * 2px;
    height: 20 * 2px;
  }
  &-footer {
    margin: 10 * 2px 15 * 2px;
    background-color: #007bff;
    text-align: center;
    color: #fff;
    font-size: 15 * 2px;
    font-weight: 590;
    padding: 8 * 2px 0;
    border-radius: 6 * 2px;
  }
  &-close {
    position: relative;
    margin-top: 20 * 2px;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 30 * 2px;
    height: 30 * 2px;
  }
}
</style>
